<template>
  <div class="dashboard">
    <ReChart :options="mapOptions" @click="handleClick" />
    <el-button v-if="isShowBack" @click="goBack">返回</el-button>
  </div>
</template>
<script setup lang="ts">
import { onBeforeMount, onMounted, reactive, ref, computed } from "vue";
import { ElMessage } from "element-plus";

import echarts from "@/plugins/echarts.js";
import ReChart from "@/components/ReChart/index.vue";
const emits = defineEmits([]);
const mapOptions = ref({});

const mapList = ref<string[]>([]); // 记录地图
const isShowBack = computed(() => {
  return mapList.value.length !== 0;
});
const getMapJson = async (mapName: string) => {
  const url = `https://geo.datav.aliyun.com/areas_v3/bound/${mapName}.json`;
  const mapJson = await fetch(url).then((res) => res.json());
  return mapJson;
};
const setOptions = (mapName: string, mapData: any) => {
  return {
    tooltip: {
      show: true,
      formatter: function (params: any) {
        if (params && params.data) {
          const { adcode, name, data } = params.data;
          return `adcode: ${adcode}<br>name: ${name}<br>data: ${data}`;
        }
      },
    },
    visualMap: {
      show: true,
      min: 0,
      max: 100,
      left: "left",
      top: "bottom",
      text: ["高", "低"],
      calculable: true,
      seriesIndex: [0],
      inRange: {
        color: ["#00467F", "#A5CC82"],
      },
    },
    geo: {
      map: mapName,
      roam: true,
      select: false,
      selectedMode: "single",
      label: {
        show: true,
      },
      emphasis: {
        itemStyle: {
          areaColor: "#389BB7",
          borderColor: "#389BB7",
          borderWidth: 0,
        },
        label: {
          fontSize: 14,
        },
      },
      // 添加以下配置解决偏移问题
      aspectScale: 0.75, // 长宽比
      zoom: 1, // 初始缩放
      center: undefined, // 自动居中
      layoutCenter: ["50%", "50%"], // 布局中心点
      layoutSize: "100%", // 布局大小
    },
    series: [
      {
        type: "map",
        map: mapName,
        roam: true,
        geoIndex: 0,
        select: false,
        data: mapData,
      },
    ],
  };
};
const initMap = async (mapName) => {
  const mapJson = await getMapJson(mapName);

  // 关键步骤：注册地图数据
  echarts.registerMap(mapName, mapJson);
  const mapdata = mapJson.features.map((item: { properties: any }) => {
    const data = (Math.random() * 80 + 20).toFixed(0); // 20-80随机数
    const tempValue = item.properties.center
      ? [...item.properties.center, data]
      : item.properties.center;
    return {
      name: item.properties.name, //名称
      value: tempValue, // 中心点经纬度
      adcode: item.properties.adcode, // 区域编码
      level: item.properties.level, // 层级
      data, // 模拟数据
    };
  });
  mapOptions.value = setOptions(mapName, mapdata);
};

// 点击下钻
const handleClick = (param: any) => {
  // 只有点击地图才触发
  if (param.seriesType !== "map") return;
  const { adcode, level } = param.data;
  const mapName = level === "district" ? adcode : adcode + "_full";
  // 防止最后一个层级被重复点击，返回上一级出错
  if (mapList.value[mapList.value.length - 1] === mapName) {
    //  notification.warning({ content: "已经是最下层了", duration: 1000 });
    return ElMessage({
      message: "已经是最下层了",
      type: "warning",
    });
  }
  mapList.value.push(mapName);
  initMap(mapName);
};

// 点击返回上一级地图
const goBack = () => {
  const mapName = mapList.value[mapList.value.length - 2] || "100000_full";
  mapList.value.pop();
  initMap(mapName);
};
const props = defineProps({});
const state = reactive({});
onBeforeMount(() => {});
onMounted(() => {
  initMap("100000_full");
});
defineExpose({ state });
</script>
<style lang="scss" scoped>
.dashboard {
  width: 100%;
  height: 100%;
  position: relative;
  .map {
    width: 100%;
    height: 100%;
  }
  button {
    position: absolute;
    top: 10px;
    left: 10px;
  }
}
</style>
